<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{
      border: solid 1px black;
    }
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>
  const cvs = document.querySelector(".cvs")
  cvs.width = 400;
  cvs.height = 200

  const ctx = cvs.getContext("2d");


  // 开始一条新路径（不受之前路径样式的影响）
  ctx.beginPath();
  // 将画笔移动到指定位置（落笔）
  ctx.moveTo(220, 50);
  // 连线到指定位置（抬笔）
  ctx.lineTo(320, 50);
  // 再连线到指定位置
  ctx.lineTo(320, 150);

  // ctx.lineTo(220, 80);

  // 设置描边粗细
  ctx.lineWidth = 10;
  // 设置描边颜色
  ctx.strokeStyle = "red";
  // 设置连接点样式
  ctx.lineJoin = "round";
  // ctx.lineJoin = "bevel";
  // 闭合路径：将最后一条线段的终点和第一条线段的起点连接
  ctx.closePath();

  ctx.stroke();


  ctx.beginPath();
  ctx.moveTo(100, 50);
  ctx.lineTo(200, 50);
  ctx.lineWidth = 20;
  // 端点样式：圆
  ctx.lineCap = "round";
  ctx.strokeStyle = "pink";
  ctx.stroke();
  
  ctx.beginPath();
  ctx.moveTo(100, 90);
  ctx.lineTo(200, 90);
  ctx.lineWidth = 20;
  // 端点样式：方
  ctx.lineCap = "square";
  ctx.strokeStyle = "red";
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(100, 120);
  ctx.lineTo(200, 120);
  ctx.lineWidth = 20;
  ctx.strokeStyle = "red";
  // 端点样式：无
  ctx.lineCap = "butt";
  ctx.stroke();

 

  
  

</script>
</html>